import styled from 'styled-components';
import React from 'react';

const Wrapper = styled.section`
  background: #efefef;
  padding: 0 16px;
  font-size: 14px;
  > label {
    display: flex;
    align-items: center;
    > span {
      margin-right: 16px;
      white-space: nowrap;
    }
    > input {
      display: block;
      width: 100%;
      height: 64px;
      border: none;
      background: none;
    }
  }
`;

type Props = {
  value: string;
  onChange: (value: string) => void
}

const NoteSection: React.FC<Props> = (props) => {
  const note = props.value;
  return (
    <Wrapper>
      <label>
        <span>备注</span>
        <input type="text" placeholder="在这里添加备注" value={note} onChange={event => props.onChange(event.target.value)}/>
      </label>
    </Wrapper>
  );
};

export {NoteSection};